<template>
	<view class="container">
		<loading :show="loading_show"></loading>
		<customHead
			:isShowBackArrow="true"
			:refresher_enabled="true"
			:title="title"
			titlePaddingLeft="30"
			navi_background="#fff"
			:placeholder="true"
		>
		</customHead>
		<view class="form_content" v-if="naviHeight">
			<view class="form_main">
				<view class="label">
					<text class="icon">*</text>
					<view class="title">店铺名称</view>
					<view class="input">
						<input type="text" v-model="addressData.storeName" placeholder="请输入店铺名称" style="width: 80%;"
							placeholder-style="color: #bbb" />
					</view>
				</view>
				<view class="label">
					<text class="icon">*</text>
					<view class="title">联系人</view>
					<view class="input">
						<input type="text" v-model="addressData.name" placeholder="请输入联系人" style="width: 80%;"
							placeholder-style="color: #bbb" />
					</view>
				</view>
				<view class="label">
					<text class="icon">*</text>
					<view class="title">手机号</view>
					<view class="input">
						<input type="number" :maxlength="11" v-model="addressData.mobile" placeholder="请输入手机号" style="width: 80%;"
							placeholder-style="color: #bbb" />
					</view>
				</view>
				
				<view class="label">
					<text class="icon">*</text>
					<view class="title">所属区域</view>
					<view class="input">
						<picker mode="region" :value="region" @change="selectRegion">
							<view class="picker">
								<block v-for="(item, index) in region" :key="index">
									<text v-if="index > 0">-</text>
									{{ item }}
								</block>
							</view>
						</picker>
					</view>
				</view>
				<!-- <view class="label">
					<text class="icon">*</text>
					<view class="title">地址信息</view>
					<view class="input">
						<input type="text" v-model="addressData.address" placeholder="请输入街道门牌信息" style="width: 80%;"
							placeholder-style="color: #bbb" />
						<view class="local" @click="getLocation()">
							<u-icon name="map-fill" color="#71beea" size="28"></u-icon>
						</view>
					</view>
				</view> -->
				<view class="label">
					<text class="icon">*</text>
					<view class="title">地址信息</view>
					<view class="input">
						<input type="text" v-model="addressData.address" placeholder="请输入街道门牌信息" style="width: 80%;"
							placeholder-style="color: #bbb" />
					</view>
				</view>
				<!-- <view class="label">
					<text class="icon">*</text>
					<view class="title">门牌号</view>
					<view class="input">
						<input type="text" v-model="addressData.houseNumber" placeholder="填写详细地址,例:1层120室"
							placeholder-style="color: #bbb" />
					</view>
				</view> -->
				
				<view class="form_item_img">
					<view class="item_top">
						<!-- <text class="icon">*</text> -->
						<view class="item_top_desc">
							<text class="title">店铺图片：</text>
							<text class="desc">（非必填）</text>
						</view>
					</view>
					<view class="desc_box">
						<text class="desc">请上传门头照片方便快速审核，便于配送人员送货上门</text>
					</view>
					<view class="image_up" >
						<view class="imageItem" v-for="(item, index) in addressData.storeImg" :key="index">
							<image class="image" :src="item" mode="aspectFill"></image>
							<view class="deleteIcon" @click="deleteStoreImg(index)">
								<u-icon name="trash" color="#fff"></u-icon>
							</view>
						</view>
						<view class="imageItemAdd" v-if="addressData.storeImg.length < maxImgNum" @click="uploadStoreImg">
							<image class="image" src="@/static/images/home/camera.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="form_item_img noborder">
					<view class="item_top">
						<view class="item_top_desc">
							<text class="title">营业执照：</text>
						</view>
					</view>
					<view class="image_up" >
						<view class="imageItem" v-for="(item, index) in addressData.licenseImg" :key="index">
							<image class="image" :src="item" mode="aspectFill"></image>
							<view class="deleteIcon" @click="deleteLicenseImg(index)">
								<u-icon name="trash" color="#fff"></u-icon>
							</view>
						</view>
						<view class="imageItemAdd" v-if="addressData.licenseImg.length < maxImgNum" @click="uploadLicenseImg">
							<image class="image" src="@/static/images/home/camera.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="form_item_box1">
				<view class="form_item_img">
					<view class="item_top">
						<view class="item_top_desc">
							<text class="title">关联办事处</text>
							<text class="desc">（根据定位选择收货地址自动匹配）</text>
						</view>
					</view>
					<view class="desc_box">
						<text class="desc">关联后即可查看对应的办事处商城</text>
					</view>
				</view>
				<view class="form_item noborder">
					<text class="icon">*</text>
					<text class="title">邀请码</text>
					<input class="input" type="text" placeholder-style="font-size: 28rpx;" placeholder="请输入业务员号码,非必填"/>
				</view>
			</view> -->
			
			
			<view class="bottom_submit" v-if="id">
				<button class="button _btn_base" @click="editStore">
					<u-icon name="plus" bold color="#fff"></u-icon>
					<text>确认修改</text>
				</button>
			</view>
			<view class="bottom_submit" v-else>
				<button class="button _btn_base" @click="addStore">
					<u-icon name="plus" bold color="#fff"></u-icon>
					<text>提交审核</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { insertAudit, uploadImages, auditDetail, updateAudit } from "@/tools/request/api.js"
	import qqmap from '@/tools/utils/qqmapsdk.js';
	const qqmapsdk = new qqmap({
		key: 'EQXBZ-6T2CG-MWNQJ-IU5MR-FPQME-TQF4G'
	});
	export default {
		data() {
			return {
				id: '',
				title: '',
				region: ['xxx', 'xxx', 'xxx'],
				addressData: {
					default: false,
					address: '',
					province: '上海市',
					city: '上海市',
					district: '闽行区',
					latitude: 0,
					name: '',
					mobile: '',
					longitude: 0,
					order: 0,
					areaCode: '',
					houseNumber: '',
					storeName: '',
					storeImg: [],
					licenseImg: []
				},
				location: '',
				maxImgNum: 6,
				loading_show: false
			};
		},
		onLoad (option) {
			this.id = option.id;
			this.location = uni.getStorageSync('__NowlocationInfo');
			this.title = this.id ? '编辑店铺' : '添加店铺';
			if (this.id) {
				this.getFirmDetail();
			}
		},
		methods: {
			// 根据id获取店铺详细信息
			getFirmDetail () {
				let postData = {
					id: this.id
				}
				this.loading_show = true;
				auditDetail(postData).then((res) => {
					this.loading_show = false;
					if (res.code != 200) return uni.$showMsg();
					if (!res.body.exJson) return;
					let info = JSON.parse(res.body.exJson);
					this.addressData = info;
					let region = [info.province, info.city, info.district];
					this.region = region;
				})
			},
			// 添加店铺
			addStore () {
				let checkResult = this.checkForm();
				if (!checkResult) return;
				this.loading_show = true;
				let time = Date.now();
				this.addressData.order = time;
				let postData = {
					adminId: this.adminId,
					exJson: JSON.stringify(this.addressData),
					remarks: '',
					userId: this.userId,
					userServiceToken: this.userServiceToken
				}
				insertAudit(postData).then((res) => {
					this.loading_show = false;
					if (res.code != 200) return uni.$showMsg();
					uni.showModal({
						title: '提示',
						content: '已提交审核，请等候！',
						showCancel: false,
						success: (res) => {
							if (!res.confirm) return;
							uni.navigateBack();
						}
					});
				})
			},
			// 修改店铺
			editStore () {
				let checkResult = this.checkForm();
				if (!checkResult) return;
				this.loading_show = true;
				let postData = {
					id: this.id,
					adminId: this.adminId,
					exJson: JSON.stringify(this.addressData),
					remarks: '',
					userId: this.userId,
					userServiceToken: this.userServiceToken
				}
				updateAudit(postData).then((res) => {
					this.loading_show = false;
					if (res.code != 200) return uni.$showMsg();
					uni.$showMsg('修改成功!')
					setTimeout(() => {
						uni.navigateBack();
					}, 500)
				})
			},
			checkForm () {
				let data = this.addressData;
				if (!data.storeName) {
					uni.showModal({
						title: '提示',
						content: '请输入店铺名称',
						showCancel: false
					});
					return;
				} else if (!data.name) {
					uni.showModal({
						title: '提示',
						content: '请输入联系人',
						showCancel: false
					});
					return;
				} else if (!/^1[3456789]\d{9}$/.test(data.mobile)) {
					uni.showModal({
						title: '手机格式错误',
						content: '请输入正确的手机号码',
						showCancel: false
					});
					return;
				} else if (!data.address) {
					uni.showModal({
						title: '提示',
						content: '请输入街道门牌信息',
						showCancel: false
					});
					return;
				} 
				// else if (!data.latitude) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '当前地址信息经纬度丢失,请点击地图选择',
				// 		showCancel: false
				// 	});
				// 	return;
				// } 
				// else if (!data.houseNumber) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请输入楼层门牌信息',
				// 		showCancel: false
				// 	});
				// 	return;
				// }
				// else if (data.storeImg.length < 2) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请至少选择2张店铺图片',
				// 		showCancel: false
				// 	});
				// 	return;
				// }
				return true;
			},
			// 上传店铺图片
			uploadStoreImg () {
				uni.chooseImage({
					count: this.maxImgNum - this.addressData.storeImg.length,
					sizeType: 'original',
					success: (res) => {
						let temPathArr = res.tempFilePaths;
						temPathArr.forEach(async (item) => { //批量一个个上传
							let postData = {
								file: item
							}
							let uploadRes = await uploadImages(postData);
							this.addressData.storeImg.push(uploadRes.body);
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			// 删除店铺图片
			deleteStoreImg (index) {
				this.addressData.storeImg.splice(index, 1);
			},
			// 上传营业执照图片
			uploadLicenseImg () {
				uni.chooseImage({
					count: this.maxImgNum - this.addressData.licenseImg.length,
					sizeType: 'original',
					success: (res) => {
						let temPathArr = res.tempFilePaths;
						temPathArr.forEach(async (item) => { //批量一个个上传
							let postData = {
								file: item
							}
							let uploadRes = await uploadImages(postData);
							this.addressData.licenseImg.push(uploadRes.body);
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			// 删除营业执照图片
			deleteLicenseImg (index) {
				this.addressData.licenseImg.splice(index, 1);
			},
			selectRegion(e) {
				this.region = e.detail.value;
				this.addressData.province = this.region[0];
				this.addressData.city = this.region[1];
				this.addressData.district = this.region[2];
			},
			getLocation() {
				let self = this;
				if (self.location == '') {
					self.chooseLocationTap()
				} else {
					self.addressData.latitude = self.location.latitude;
					self.addressData.longitude = self.location.longitude;
					self.chooseLocationTap()
				}
			},
			chooseLocationTap() {
				let self = this;
				let data = self.addressData;
				console.log(data, '当前位置')
				uni.chooseLocation({
					latitude: data.latitude || '',
					longitude: data.longitude || '',
					success(res) {
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success(qes) {
								let qdata = qes.result.ad_info;
								self.region = [qdata.province, qdata.city, qdata.district];
								self.addressData.province = qdata.province;
								self.addressData.city = qdata.city;
								self.addressData.district = qdata.district;
								self.addressData.address = res.name;
								self.addressData.areaCode = qdata.adcode;
								self.addressData.latitude = res.latitude;
								self.addressData.longitude = res.longitude;
							}
						});
					},
					fail(err) {
						self.editAddressStatus = true;
						console.log(err, 'err')
						return uni.showToast({
							title: '选择位置失败，请手动输入',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		
		.form_content{
			width: 100%;
			margin-top: 30rpx;
			width: 100%;
			padding: 0 30rpx;
			padding-bottom: 180rpx;
			box-sizing: border-box;
			
			
			.form_main{
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
			}
			.label {
				display: flex;
				align-items: center;
				height: 120rpx;
				width: 90%;
				margin: 0 auto;
				
				.icon{
					color: #ff0000;
				}
			
				.title {
					width: 140rpx;
					color: #1c1c1c;
					font-size: 28rpx;
					padding: 0 10rpx;
				}
			
				.input {
					flex: 1;
					height: 70rpx;
					display: flex;
					align-items: center;
					border: 1px solid #efefef;
					border-radius: 10rpx;
					justify-content: space-between;
			
					input {
						width: 92%;
						height: 100%;
						color: #1c1c1c;
						font-size: 28rpx;
						padding-left: 20rpx;
					}
			
					.local {
						width: 70rpx;
						height: 70rpx;
						background-color: #efefef;
						display: flex;
						align-items: center;
						justify-content: center;
					}
			
					picker {
						width: 92%;
						height: 100%;
						line-height: 70rpx;
						color: #1c1c1c;
						font-size: 28rpx;
						padding-left: 20rpx;
			
						.picker {
							width: 100%;
			
							text {
								padding: 0 10rpx;
								color: #bbb;
							}
						}
					}
				}
			}
			
			
			.form_item_img{
				display: flex;
				flex-direction: column;
				padding: 30rpx 20rpx;
				border-bottom: 1rpx solid #e5e5e5;
				
				.item_top{
					display: flex;
					
					.icon{
						color: #ff0000;
					}
					.item_top_desc{
						
						.title{
							width: 140rpx;
							color: #1c1c1c;
							font-size: 28rpx;
							padding: 0 10rpx;
						}
						.desc{
							color: #878787;
							font-size: 26rpx;
						}
					}
				}
				.desc_box{
					margin-top: 10rpx;
					padding: 0 10rpx;
					
					.desc{
						color: #878787;
						font-size: 26rpx;
					}
				}
				.image_up{
					width: 100%;
					margin-top: 30rpx;
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					
					.imageItem{
						width: 150rpx;
						height: 150rpx;
						margin: 20rpx;
						border-radius: 20rpx;
						position: relative;
						
						.image{
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
						.deleteIcon{
							padding: 6rpx;
							background: rgba(143, 143, 143, 0.5);
							border-radius: 10rpx;
							position: absolute;
							top: 0;
							right: 0;
						}
					}
					.imageItemAdd{
						width: 100rpx;
						height: 100rpx;
						padding: 20rpx;
						border: 1rpx dashed #747474;
						border-radius: 20rpx;
						
						.image{
							width: 100%;
							height: 100%;
						}
					}
					
				}
			}
			.form_item_box1{
				margin-top: 20rpx;
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 160rpx;
			}
			.noborder{
				border: none;
			}
			
			.bottom_submit{
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
				padding: 0 30rpx;
				padding-bottom: env(safe-area-inset-bottom);
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				
				.button{
					width: 100%;
					height: 80rpx;
					border-radius: 35rpx;
					font-size: 28rpx;
					color: #fff;
					padding: 0;
					font-size: 34rpx;
					font-weight: bold;
					margin-top: 30rpx;
					
					text{
						padding: 0 10rpx;
					}
				}
			}
		}
	}
</style>
